<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { tryit } from 'radash';
import { MessagePlugin } from 'tdesign-vue-next';

import mockApi from '@/api/mock';
import { SUCCESS_CODE } from '@/constants';
import { ListParams } from '@/api/model/mockModel';
import { useTableHeight } from '@/hooks/useTableHeight';
import { useLoading } from '@/hooks/useLoading';
import { useListPage } from '@/hooks/useListPage';
import { columns } from '../data/GA1400';
import ConnectStatusView from '@/components/connectStatus/index.vue';
import { color } from 'echarts/core';

const containerRef = ref<HTMLDivElement>();
const { pageData, handlePageChange, search, reset, formRef } = useListPage(getData);
const { searchRef, searchHeight } = useTableHeight();
const { loadingStart, loadingEnd } = useLoading(containerRef);
const tableData = ref([]);

async function getData() {
  loadingStart();

  const postData: ListParams = { ...pageData.params };
  const [err, res] = await tryit(mockApi.list)(postData);

  if (!err && res.code === SUCCESS_CODE) {
    const { list, total } = res.data;
    console.log('99999999', list);
    tableData.value = list.map((item: any) => {
      return {
        id: item.id,
        dev_name: item.dev_name,
        enable: item.enable,
        connect_status: item.network.connect_status,
      };
    });
    pageData.total = total;
  }
  loadingEnd();
}

const update = (data: any) => {
  console.log('5555555555', data);
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div ref="containerRef" class="GA1400-connect-wrap">
    <div class="common-table-wrap">
      <t-base-table class="common-table" row-key="index" :data="tableData" max-height="100%" :columns="columns">
        <template #enable="{ row }">
          <t-switch size="large" :value="row.enable" :label="['ON', 'OFF']"></t-switch>
        </template>
        <template #connect_status="{ row }">
          <div v-if="!row.enable">--</div>
          <ConnectStatusView v-else :connect="row.connect_status"></ConnectStatusView>
        </template>
        <template #opt="{ row }">
          <div class="common-options">
            <div class="item" @click="update(row)">
              <svg-icon class="icon" v-if="row.enable" name="options-ipIcon" />
              <svg-icon class="icon" v-else name="options-ipIcon02" />
              <t-link theme="primary" :class="row.enable ? 'link' : 'link-dis link'" :underline="true"
                >设备IP配置</t-link
              >
            </div>
          </div>
        </template>
      </t-base-table>
      <pagination-view
        v-if="!!pageData.total"
        :current="pageData.params.page"
        :total="pageData.total"
        :page-size="pageData.params.size"
        @page-change="handlePageChange"
      ></pagination-view>
    </div>
  </div>
</template>

<style lang="less" scoped>
.GA1400-connect-wrap {
  width: 100%;
  height: 100%;
  .link-dis {
    color: #a5b4cb;
    &::after {
      border-color: #a5b4cb;
    }
  }
}
</style>
